<template>
    <div class="_page question-2025101602-page">
        <WxChat v-show="currTab==1"/>
        <Xiaohshu :show="currTab==2"/>
        <Poster v-show="currTab==3"/>
        <Moments v-show="currTab==4"/>
        <div class="download-btn" @click="doDownload()">下载</div>

        <ul class="left-tabs">
            <li v-for="item in tabs" :key="item.key" @click="currTab=item.key" :class="{ active: currTab==item.key}">{{ item.value }}</li>
        </ul>
    </div>
</template>

<script>
import WxChat from './WxChat.vue'
import Xiaohshu from './Xiaohshu.vue'
import Poster from './poster/Main.vue'
import Moments from './moments/Main.vue'
import html2canvas from 'html2canvas'
import { ref } from 'vue'

export default {
    components: {
        WxChat, Xiaohshu, Poster, Moments
    },
    setup () {
        const tabs = ref([{ key: '1', value: '问答分享' }, { key: '2', value: '小红书分享' }, { key: '3', value: '海报' }, { key: '4', value: '朋友圈封面' }])
        const currTab = ref('1')
        const doDownload = () => {
            if (currTab.value == 2) {
                const str = document.querySelector('.xhs-content-wrap>.input').innerHTML
            }
            let dom = null
            if (currTab.value == 1) {
                dom = document.querySelector('.pic-content-wrap')
            } else if (currTab.value == 2) {
                dom = document.querySelector('.xhs-content-wrap')
            } else if (currTab.value == 3) {
                dom = document.querySelector('.poster-wrap')
            } else if (currTab.value == 4) {
                dom = document.querySelector('.moments-wrap')
            }
            html2canvas(dom, { scale: (currTab.value == 4 ? 1.6875 : 2) }).then((canvas) => {
                const imgURL = canvas.toDataURL({ format: 'image/png', quality: 1 })
                const alink = document.createElement('a')
                alink.download = Date.now() + '.png'
                alink.href = imgURL
                alink.click()
            })
        }

        return {
            tabs,
            currTab,
            doDownload
        }
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>
